import React, { useState } from 'react';
import { Radio, Row, Col, DatePicker } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;


const RadioTxt = {
    yes: '审核通过即可生效',
    no: '指定日期生效'
}


const EffectiveDate = ({ value = {}, onChange, disabled }) => {
    const [radioValue, setRadioValue] = useState(1);

    // 日期change
    const handleOk = selectValue => {
        const dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
        if (onChange) {
            onChange({
                ...radioValue,
                startTime: selectValue[0].format(dateFormatStr),
                endTime: selectValue[1].format(dateFormatStr)
            })
        }
    };

    // Radio onChange
    const radioOnChange = radioChangeValue => {
        const { target } = radioChangeValue;
        const t = {
            auditEffectFlagName: RadioTxt[target?.value],
            auditEffectFlag: target?.value
        }
        setRadioValue(t)
        if (onChange) {
            onChange(t)
        }
    };


    return (
        <>
            <Row gutter={24} type="flex" align="bottom">
                <Col span={10}>
                    <Radio.Group disabled={disabled} onChange={radioOnChange} value={value?.auditEffectFlag ?? 'yes'}
                        style={{ lineHeight: '40px' }}>
                        <Radio value="yes">审核通过即可生效</Radio>
                        <Radio value="no">指定日期生效</Radio>
                    </Radio.Group>
                </Col>
                <Col span={14}>
                    <RangePicker
                        value={
                            value?.startTime ? [
                                moment(value?.startTime),
                                moment(value?.endTime)
                            ] : []
                        }
                        disabled={disabled}
                        format="YYYY-MM-DD"
                        onChange={handleOk}
                        style={{ display: value?.auditEffectFlag !== 'no' ? 'none' : 'block' }}
                    />
                </Col>
            </Row>
        </>
    )
}

export default EffectiveDate;
